<template>
  <div class="el-input__inner d-flex align-items-center justify-content-between cursor-pointer text-nowrap" @click="isReverse = !isReverse">
    <span>{{title}}</span>
    <i :class="['el-select__caret el-input__icon el-icon-arrow-up', isReverse ? 'is-reverse' : '']"/>
  </div>
</template>

<script>
  export default {
    name: "BaseSelectInput",
    props: ['title'],
    data(){
      return{
        isReverse: false
      }
    }
  }
</script>

<style scoped>
  .el-input__inner{
    padding-right: 5px;
  }
  .el-icon-arrow-up{
    transition: all .3s;
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
  }
  .is-reverse {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
  }
  .el-input__icon{
    line-height: 0;
  }
</style>